<template>
  <div ref="monLand" style="top: 0; left: 0; z-index: 102; position: absolute">
    <!-- <div class="boxBgMontior" style="left: 888px; top: 271px" @click="Vchange">
      <span class="monBox_close pbtn" @click="deleteParentDom()"></span>
      <span class="monLan_title">
        <p style="color: #218cff;
letter-spacing: 2px; margin-right: 15px">在线</p>
        <p>1号楼1层室外走廊西</p>
      </span>
      <div class="Gimbal">
        <i class="pbtn" style="left: 32px; top: 18px"></i>
        <i class="pbtn" style="left: 30px; bottom: 15px; transform: rotate(180deg)"></i>
        <i class="pbtn" style="left: -5px; bottom: 50px; transform: rotate(-90deg)"></i>
        <i class="pbtn" style="right: -5px; bottom: 50px; transform: rotate(90deg)"></i>
      </div>
      <div class="narrow_enlarge">
        <div>
          <i style="background-image: url(/imgs/monitorBox/放大.png)"></i>
          <p>放大</p>
        </div>
        <div>
          <i style="background-image: url(/imgs/monitorBox/缩小.png)"></i>
          <p>缩小</p>
        </div>
      </div>
      <div class="PlayVideoBox"></div>
    </div> -->
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch, toRefs, computed } from 'vue'

import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
//数据仓库库
const store = useStore()
const { api } = toRefs(store.state)

const monLand = ref(null)
const props = defineProps({
  showMonitor: Boolean,
  monitorForm: Object
})

// 用于存储元素X和Y位置的响应性引用
// const x = ref(271)
// const y = ref(888)

// 是否正在拖动的标志
const isDragging = ref(false)

// onClick="deleteParentDom(${id})"
//添加新的播放dom
const addNewPlayDom = (b, index) => {
  //   monLand.value.children.filters((item) => {
  //     if (item.id == 'v1_' + b.id) {
  //       item.remove()
  //     }
  //   })
  var divId = 'v1_' + b.id
  if (monLand.value.children[divId]) {
    monLand.value.children[divId].remove()
  }

  if (monLand.value.children.length >= 4) {
    ElMessage({
      message: '最多只能打开4个监控',
      type: 'warning'
    })
    return
  }

  var html = `      <span class="monBox_close pbtn" onClick="deleteParentDom('${b.id}')"></span>
      <span class="monLan_title">
        <p style="color: #218cff;
        letter-spacing: 2px; margin-right: 15px">${b.state == 0 ? '在线' : '离线'}</p>
        <p>${b.text}</p>
      </span>
      <div class="Gimbal">
        <i class="pbtn" style="left: 32px; top: 18px;transform: rotate(0deg)"></i>
        <i class="pbtn" style="left: 30px; bottom: 15px; transform: rotate(180deg)"></i>
        <i class="pbtn" style="left: -5px; bottom: 50px; transform: rotate(-90deg)"></i>
        <i class="pbtn" style="right: -5px; bottom: 50px; transform: rotate(90deg)"></i>
      </div>
      <div class="narrow_enlarge">
        <div class="pbtn">
          <i style="background-image: url(/imgs/monitorBox/放大.png)"></i>
          <p>放大</p>
        </div>
        <div class="pbtn">
          <i style="background-image: url(/imgs/monitorBox/缩小.png)"></i>
          <p>缩小</p>
        </div>
      </div>
      <div id=${'cam_' + b.id} class="PlayVideoBox"></div>
      `
  // 创建一个新的div元素
  var newDiv = document.createElement('div')
  newDiv.setAttribute('class', 'boxBgMontior')
  newDiv.setAttribute('id', 'v1_' + b.id)
  newDiv.setAttribute(
    'style',
    'left: ' + (700 + index * 60) + 'px; top: ' + (151 + index * 60) + 'px;'
  )
  newDiv.addEventListener('mousedown', startDrag)

  //   newDiv.setAttribute('id', id)
  newDiv.innerHTML = html
  //   newDiv.children[1].addEventListener('click', deleteParentDom)
  //   newDiv.innerHTML = html
  monLand.value.appendChild(newDiv)
  //   document.getElementsByClassName('monBox_close').onClick = function () {
  //     console.log('删除')
  //   }
  hPlayVideo(b.code, 'cam_' + b.id)
}

const hPlayVideo = (code, domId) => {
  let cPlay = null //播放句柄
  if (domId) {
    cPlay = new window.JSPlugin({
      szId: domId, //需要英文字母开头，唯一性，必填
      szBasePath: '/HK', // 必填,与h5player.min.js的引用目录一致
      bSupporDoubleClickFull: true //是否支持双击全屏，默认true
      // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
      // iWidth: 600,
      // iHeight: 400,
      // 分屏播放，默认最大分屏4*4
      // iMaxSplit: 4,
      // iCurrentSplit: 1,
    })
  }

  api.value.hServerCamPlay(code, (rs) => {
    console.log('hPlayVideo', rs)
    let url = rs
    cPlay
      .JS_Play(
        url,
        {
          playURL: url,
          mode: 1
        },
        1
      )
      .then(
        () => {
          console.log('预览 成功')
          cPlay.JS_Resize()
        },
        (e) => {
          ElMessage.error('预览 异常.' + e)
          console.error('预览 异常', e)
        }
      )
  })
  cPlay.JS_Resize()

  // 事件回调绑定
  cPlay.JS_SetWindowControlCallback({
    windowEventSelect: function (iWndIndex) {
      //插件选中窗口回调
      console.log('选中窗口: ', iWndIndex)
    },
    pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
      //插件错误回调
      console.log('插件错误: ', iWndIndex, iErrorCode, oError)
    },
    windowEventOver: function (iWndIndex) {
      //鼠标移过回调
      //console.log(iWndIndex);
    },
    windowEventOut: function (iWndIndex) {
      //鼠标移出回调
      //console.log(iWndIndex);
    },
    windowEventUp: function (iWndIndex) {
      //鼠标mouseup事件回调
      //console.log(iWndIndex);
    },
    windowFullCcreenChange: function (bFull) {
      //全屏切换回调
      console.log('全屏切换回调: ', bFull)
    },
    firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
      //首帧显示回调
      console.log('首帧显示回调: ', iWndIndex, iWidth, iHeight)
    },
    performanceLack: function () {
      //性能不足回调
      console.log('性能不足回调: ')
    }
  })
}

const changemonitorForm = (d, index) => {
  //   if (props.showMonitor) {
  addNewPlayDom(d, index)
  //   }
}
defineExpose({
  changemonitorForm
})

// watch((monitorForm) => {
//   console.log('monitorForm', props.showMonitor)
//   if (props.showMonitor) {
//     addNewPlayDom(props.monitorForm)
//   }
//   //   addNewPlayDom(props.monitorForm.id)
// })
// 开始拖动的函数
const startDrag = (event) => {
  if (event.target.id.indexOf('v1_') < 0) {
    return
  }

  var x = parseInt(event.target.style.left.replace('px', ''))
  var y = parseInt(event.target.style.top.replace('px', ''))
  //   var x = 271
  //   var y = 888
  console.log('startDrag', event)

  // 记录初始鼠标位置
  const initialMouseX = event.clientX
  const initialMouseY = event.clientY

  // 记录初始元素位置
  const initialX = x
  const initialY = y

  // 开始拖动，设置为true
  isDragging.value = true

  // 当鼠标移动时执行的函数
  const dragging = (moveEvent) => {
    // 只有在拖动时才执行
    if (isDragging.value) {
      // 计算鼠标移动的距离
      const deltaX = moveEvent.clientX - initialMouseX
      const deltaY = moveEvent.clientY - initialMouseY

      // 更新元素的位置
      x = initialX + deltaX
      y = initialY + deltaY
      //   console.log('startDrag', x, y)
      event.target.style = `left: ${x}px; top: ${y}px;`
    }
  }

  // 鼠标释放时停止拖动的函数
  const stopDrag = () => {
    // 结束拖动，设置为false
    isDragging.value = false

    // 移除事件监听器
    document.removeEventListener('mousemove', dragging)
    document.removeEventListener('mouseup', stopDrag)
  }

  // 添加鼠标移动和释放时的事件监听器
  document.addEventListener('mousemove', dragging)
  document.addEventListener('mouseup', stopDrag)
}

window.deleteParentDom = function (id) {
  document.getElementById('v1_' + id).remove()
  //
  console.log('deleteParentDom', id)
  //   monLand.value.removeChild(monLand.value.lastChild)
}

// const deleteParentDom = (id) => {
//   console.log('deleteParentDom', id)
//   //   monLand.value.removeChild(monLand.value.lastChild)
// }
const Vchange = () => {
  console.log('showMonitor', props.monitorForm)
  //   if (props.showMonitor) {
  //     store.commit('SET_SHOWMONITOR', false)
  //   } else {
  //     store.commit('SET_SHOWMONITOR', true)
  //   }
}
</script>

<style lang="scss" scoped></style>

<style lang="scss">
.boxBgMontior {
  width: 654px;
  height: 334px;
  background: url(/imgs/monitorBox/boxBg.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
}
.monLan_title {
  position: absolute;
  left: 36px;
  top: 20px;
  display: flex;
  align-items: center;

  p {
    font-family: FZCuYuan-M03S;
    font-weight: 400;
    font-size: 15px;
    color: #545454;
  }
}
.Gimbal {
  background-image: url(/imgs/monitorBox/方向背景.png);
  background-size: 100% 100%;
  width: 133px;
  height: 133px;
  position: absolute;
  right: 26px;
  top: 62px;

  i {
    background-image: url(/imgs/monitorBox/上.png);
    position: absolute;
    width: 70px;
    height: 30px;
  }
}
.narrow_enlarge {
  position: absolute;
  right: 26px;
  bottom: 38px;

  width: 140px;
  height: 91px;
  display: flex;
  justify-content: space-between;

  div {
    background-image: url(/imgs/monitorBox/boxBg1.png);
    background-size: 100% 100%;
    width: 66px;
    height: 91px;
    position: relative;

    i {
      width: 49px;
      height: 49px;
      background-size: 100% 100%;
      position: absolute;
      top: 14px;
      left: 8px;
    }
    p {
      font-family: ShiShangZhongHeiJianTi;
      font-weight: 400;
      font-size: 15px;
      color: #636363;
      position: absolute;
      bottom: 10px;
      left: 17px;
    }
  }
}
.monBox_close {
  background-image: url(/imgs/monitorBox/close.png);
  background-size: 100% 100%;
  width: 13px;
  height: 13px;
  position: absolute;
  right: 28px;
  top: 22px;
}
.PlayVideoBox {
  position: absolute;
  width: 455px;
  height: 261px;
  top: 50px;
  left: 18px;
}
</style>
